<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img style="width: 100%" src="@/assets/images/home/banner1.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img style="width: 100%" src="@/assets/images/home/banner2.jpg" alt="" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-prv"><i class="iconfont icon-xiangyou1"></i></div>
    <div class="swiper-next"><i class="iconfont icon-xiangyou1"></i></div>
  </div>
</template>

<script>
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";

export default {
  name: "myBanner",
  mounted() {
    new Swiper(".swiper-container", {
      // direction: "vertical", // 垂直切换选项
      //mousewheel: true, //滚轮
      autoplay: {
        //自动开始
        delay: 3500, //时间间隔
        disableOnInteraction: false, //*手动操作轮播图后不会暂停*
      },
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true, // 分页器可以点击
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-next",
        prevEl: ".swiper-prv",
      },
    });
  },
};
</script>

<style lang="less" scoped>
.swiper-container {
  // height: 400px;
  position: relative;
  &:hover .swiper-prv,
  &:hover .swiper-next {
    // display: flex;
    opacity: 1;
    transition: all 1s;
  }
  .swiper-prv {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 20px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-50%) rotate(180deg);
    border-radius: 6px;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
    // display: none;
    opacity: 0;
    transition: all 0.4s;
    i {
      font-size: 24px;
      color: #444;
    }
  }
  .swiper-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-50%);
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
    // display: none;
    opacity: 0;
    transition: all 0.4s;
    i {
      font-size: 24px;
      color: #444;
    }
  }
  &::v-deep .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    opacity: 1;
  }
  &::v-deep .swiper-pagination-bullet-active {
    background: #fff !important;
    width: 12px !important;
    height: 12px !important;
  }
}
</style>